{% extends 'layout.html' %}

{% block content %}
	<div class="container">
		<div style="margin-bottom: 10px">
			{#通过一般方式击跳转#}
			<input value="新建订单1" type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"/>
			{#通过绑定ID点击跳转(建议)#}
			<input id='btnAdd' value="新建订单2" type="button" class="btn btn-success"/>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading">
				<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>{# 在部门列表前加图标 #}
				订单列表
			</div>
			<div class="panel-body">
				<table class="table table-bordered table-striped ">{# 带边宽,带条纹 #}
					<thead>
					<tr>
						<th>ID</th>
						<th>订单号</th>
						<th>名称</th>
						<th>价格</th>
						<th>状态</th>
						<th>管理员</th>
						<th>操作</th>

					</tr>
					</thead>
					<tbody>
					{% for obj in queryset %}
						<tr uid="{{ obj.id }}">
							{#							循环取得列表内容#}
							<td>{{ obj.id }}</td>
							<td>{{ obj.oid }}</td>
							<td>{{ obj.title }}</td>
							<td>{{ obj.price }}</td>
							<td>{{ obj.get_status_display }}</td>
							<td>{{ obj.admin.username }}</td>


							<td>
								<input uid='{{ obj.id }}' class="btn btn-primary btn-xs btn-edit" type="button"
								       value="编辑">
								<input uid='{{ obj.id }}' class="btn btn-danger btn-xs btn-delete" type="button"
								       value="删除"> {#设置属性btn-delete,绑定事件#}
							</td>

						</tr>
					{% endfor %}

					</tbody>
				</table>
			</div>
			<ul class="pagination" style="float: left">
				{{ page_string }}
			</ul>

		</div>
	</div>

	<!-- 新建/编辑订单 模态对话框Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">新建</h4>
				</div>
				<div class="modal-body">


					{# 表单内容 #}
					<form id="formAdd">
						<div class="clearfix">
							{% for field in form %}
								<div class="col-xs-6">
									<div class="form-group" style="position: relative;margin-bottom: 10px">
										<label>{{ field.label }}
											<span class="error-msg" style="color: red;position: absolute"></span>
										</label>
										{{ field }}{# 输入框内容 #}

									</div>
								</div>
							{% endfor %}
						</div>
					</form>


				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
					<button id='btnSave' type="button" class="btn btn-primary">保 存</button>
				</div>
			</div>
		</div>
	</div>


	<!-- 删除对话框 模态对话框Modal -->

	<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="alert alert-danger alert-dismissible fade in" role="alert">

				<h4>是否确定删除?</h4>
				<p>删除后所有关联的相关数据都会被删除!</p>
				<p style="text-align: right">
					<button id='btnConfirmDelete' type="button" class="btn btn-danger">确 定</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				</p>
			</div>
		</div>
	</div>


{% endblock %}


{% block js %}
	<script type="text/javascript">
        //定义一个全局变量
        var DELETE_ID;
        var EDIT_ID;

        $(function () {
            bindBtnAddEvent();
            bingBtnSaveEvent();
            bingBtnDeleteEvent();
            bingBtnConfirmDeleteEvent();
            bingBtnEditEvent();
        })

        function bindBtnAddEvent() {
            $('#btnAdd').click(function () {
                //将正在编辑的ID设置为空:
                EDIT_ID = undefined; //未定义,或者=0,=False
                //先清空数据
                $('#formAdd')[0].reset()
                //点击新建,把标题'编辑'改为'新建'(新建/编辑共用一个对话框)
                $('#myModalLabel').text('新建');
                {#点击新建按钮,显示对话框(通过JavaScript调用)#}
                $('#myModal').modal('show');
            });
        }

        function bingBtnSaveEvent() {
            $('#btnSave').click(function () {
                {#//点击时先清空错误信息#}
                $('.error-msg').empty();
                //判断是添加还是编辑:
                if (EDIT_ID) {
                    //编辑:
                    doEdit()
                } else {
                    //添加:
                    doAdd();
                }
            });
        }

        function doEdit() {
            {#向后台发送 编辑的 Ajax请求信息#}
            $.ajax({
                url: '/order/edit/' + '?uid=' + EDIT_ID,  //==>/order/edit/?uid=EDIT_ID
                type: 'post',
                data: $('#formAdd').serialize(), //获取form表单中填写的全部数据
                dataType: 'JSON',

                success: function (res) {
                    if (res.status) {
                        // 清空表单
                        $('#formAdd')[0].reset();
                        location.reload();  //整个页面刷新
                        {#$('#formAdd')[0].reset() //('#formAdd')[0]:DOM对象,只刷新表单#}
                        {#$('#myModal').modal('hide'); //隐藏对话框#}
                    } else {
                        if (res.tips) {
                            alert(res.tips);
                        } else {
                            {#把错误信息显示在对话框中#}
                            $.each(res.error, function (name, errorList) {
                                $('#id_' + name).prev().find("span").text(errorList[0]);
                            })
                        }
                    }

                }
            })
        }

        function doAdd() {
            {#向后台发送 添加的 Ajax请求信息#}
            $.ajax({
                url: '/order/add/',
                type: 'post',
                data: $('#formAdd').serialize(), //获取form表单中填写的全部数据
                dataType: 'JSON',

                success: function (res) {
                    if (res.status) {
                        // 清空表单
                        $('#formAdd')[0].reset();
                        location.reload();  //整个页面刷新
                        {#$('#formAdd')[0].reset() //('#formAdd')[0]:DOM对象,只刷新表单#}
                        {#$('#myModal').modal('hide'); //隐藏对话框#}
                    } else {
                        {#把错误信息显示在对话框中#}
                        $.each(res.error, function (name, errorList) {
                            $('#id_' + name).prev().find("span").text(errorList[0]);
                        })
                    }

                }
            })
        }

        function bingBtnDeleteEvent() {
            $('.btn-delete').click(function () {
                {#alert('点击了删除');#}
                //显示删除对话框
                $('#deleteModal').modal('show')

                //获取当前行的ID,并赋值给全局变量
                DELETE_ID = $(this).attr('uid');  //$(this):当点击这个标签,取ID:attr
            });
        }

        function bingBtnConfirmDeleteEvent() {
            $('#btnConfirmDelete').click(function () {
                //点击确认删除按钮,将全局变量中设置的那个要删除ID发送到后台
                $.ajax({
                    url: '/order/delete/',  //==>/order/delete/?uid=DELETE_ID
                    type: 'GET',
                    data: {
                        uid: DELETE_ID
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            location.reload();  //整个页面刷新
                        } else {
                            //删除失败
                            alert(res.error);
                        }
                    }
                })
            });
        }

        function bingBtnEditEvent() {
            $('.btn-edit').click(function () {
                $('#formAdd')[0].reset(); //先清空数据

                var uid = $(this).attr('uid');
                EDIT_ID = uid;
                {#alert('点击了编辑'),#}
                $.ajax({
                    url: '/order/detail/',  //==>/order/delete/?uid=DELETE_ID
                    type: 'GET',
                    data: {uid: uid},
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            console.log(res);
                            $.each(res.data, function (name, value) {
                                $('#id_' + name).val(value);
                            })

                            //点击新建,把标题'新建'改为'编辑'(新建/编辑共用一个对话框)
                            $('#myModalLabel').text('编辑');
                            {#点击编辑按钮,显示对话框(通过JavaScript调用)#}
                            $('#myModal').modal('show');
                            //发送Ajax去后台获取当前行的相关数据  ==> /order/detail/?uid=uid

                        } else {
                            alert(res.error);
                        }

                    }
                });
                //在对话框中默认看到


            });


        }

	</script>
{% endblock %}
















